<template>
	<view class="doPay">
		<view class="order">
			订单编号: <view class="numb">{{id}}</view>
		</view>
		<view class="order">
			订单金额: <view class="numb">{{price}}元</view>
		</view>
		<view class="type">
			<view class="way" >选择支付方式</view>
			<view class="alipay">
				<radio-group @change="radioChange">
					 <label  v-for="(item, index) in payType" :key="item.value" class="uni-list-cell uni-list-cell-pd" >
						 <view class="label">
							 <view class="left">
							 	<image :src="item.img" mode="widthFix"></image>
								<view>{{item.name}}</view>
							 </view>
							<view>
								<radio :value="item.value" :checked="index === current" />
							</view>
						 </view>
					</label>
				</radio-group>
			</view>
		</view>
		<button @click="doPay" type="primary">立即支付</button>
	</view>
</template>

<script>
	import {payList,payConfirm} from "../../../utils/sort/index.js"
	export default {
		data() {
			return {
				current: 0,
				price:0,
				userInfo:{},
				id:"",
				type:"",
				payType:[
					{
						value: 'alipay ',
						name: '支付宝',
						img:"../../../static/icons/alipay.png"
					},
					{
						value: 'wxpay ',
						name: '微信',
						img:"../../../static/icons/wxpay.png"
					}
				]
			};
		},
		onLoad(options) {
			// payList()
			this.price = options.price
			this.id = options.orderId
			this.userInfo = uni.getStorageSync("user")
		},
		onShow() {
			this.current = 0
		},
		methods:{
			radioChange(val){
				// console.log(val)
				this.type =val.detail.value
			},
			doPay(){
				uni.showLoading({
				    title: '支付中...',
					mask:true
				});
				let params = {
					payType: this.type,
					orderId:this.id,
					userId:this.userInfo.id
				}
				console.log(params)
				payConfirm(params)
				.then(res=>{
					// console.log(res)
					if(res.data.code == "S"){
						uni.hideLoading();
						uni.showToast({
						    title: '支付成功,3s后跳转！',
						    duration: 3000,
							icon:'none'
						});
						setTimeout(()=>{
							uni.switchTab({
								url:"../../user/user"
							})
							this.$store.commit("reset")
						},3000)
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
body,html,uni-page-body {
	height: 100%!important;
	background-color: #F1ECE7;
}
.doPay{
	width: calc(100% - 40rpx);
	height: 100%;
	padding: 0 20rpx;
	overflow: hidden;
	background-color: #F1ECE7;
	.order{
		display: flex;
		margin: 20rpx 0;
		color: #B8B5B3;
		.numb{
			color: #2D2C2B;
			margin-left: 20rpx;
		}
	}
	.type{
		width: 100%;
		.label{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
					margin-right: 30rpx;
				}
			}
		}
		.way{
			margin: 80rpx 0 20rpx;
		}
	}
	button{
		width: 600rpx;
		margin: 80rpx auto;
	}
}
</style>
